<template>
  <div id="state-station">
    <div id="echarts-state-station" class="echarts"></div>
  </div>
</template>

<script>
import Echarts from "echarts";
import { getCityDistrict, getStateStationRealtime } from "../../axios/api";
import { getStateStationTemplate } from "../../utils/template";

export default {
  methods: {
    getCityDistrict() {
      getCityDistrict(data => {
        Echarts.registerMap("sjz", JSON.parse(data.geojson));
        getStateStationRealtime(list => {
          let array = list.map(item => {
            return {
              name: item.station,
              value: [item.longitude, item.latitude],
              data: item
            };
          });
          this.initEcharts(array);
        });
      });
    },
    initEcharts(array) {
      let echarts = Echarts.init(
        document.getElementById("echarts-state-station")
      );
      let option = {
        tooltip: {
          hideDelay: 0,
          enterable: true,
          confine: true,
          transitionDuration: 0,
          formatter: res => {
            let data = res.data.data;
            return getStateStationTemplate(data);
          },
          backgroundColor: "rgba(11, 26, 54, 0.8)",
          padding: 0
        },
        geo: {
          map: "sjz",
          itemStyle: {
            areaColor: "#0443C4",
            color: "#666",
            borderColor: "#EDC742",
            borderWidth: 2
          },
          emphasis: {
            label: {
              show: false
            },
            itemStyle: {
              areaColor: "transparent"
            }
          },
          layoutCenter: ["50%", "50%"],
          layoutSize: "100%"
        },
        series: [
          {
            type: "effectScatter",
            rippleEffect: {
              brushType: "stroke"
            },
            coordinateSystem: "geo",
            symbolSize: 20,
            itemStyle: {
              color: "#0F0",
              shadowBlur: 10,
              shadowColor: "#0F0"
            },
            data: array,
            zlevel: 1
          }
        ]
      };
      echarts.setOption(option);
    }
  },
  mounted() {
    this.getCityDistrict();
  }
};
</script>

<style lang="stylus" scoped>
#state-station
  position relative
  width 100%
  height 100%

  > .echarts
    position relative
    width 100%
    height 100%

    >>> .echarts-tooltip
      position relative
      width 300px
      line-height 25px
      border 1px solid #666

      .row
        text-align center
        border-bottom 1px solid #666

        > .col
          width 74px
          border-right 1px solid #666

        > .col:nth-last-of-type(1)
          border-right none

      > .row:nth-last-of-type(1)
        border-bottom none

        > .col-2
          width 225px
</style>
